<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-row class="top-btn">
          <el-col :span="12">
            <el-button color="#1C84C6" @click="open">添加</el-button>
            <el-button color="#e35148" @click="handleAllDelete">删除所有</el-button>
            <el-button @click="catLog" style="color:#1C84C6">查看日志</el-button>
          </el-col>
          <el-col :span="12">
            <el-input class="handle-input" placeholder="请输入要查询的图书关键字">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :header-cell-style="{ color: '#2A62BC' }"
        border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column prop="id" label="序号" width="120" align="center" />
        <el-table-column label="图书名称" width="120" align="center">
          <template #default="scope">{{ scope.row.bookName }}</template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" align="center" />
        <el-table-column prop="price" label="单价" align="center" />
        <el-table-column prop="publisher" label="出版社" align="center" />
        <el-table-column prop="date" label="出版日期" align="center" />
        <!-- <el-table-column label="出版封面"  align="center"  >
        <template #default="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.url" :fit="cover" />
      </template>
      </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-row class="right-btn">
              <el-button color="#1c84c6" :icon="Edit" @click="open(scope.$index, scope.row)">更新</el-button>
              <el-button color="#e35148" :icon="Delete" @click="handleDelete(scope.$index, row
              )">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogTableVisible" :title="editTitle" width="650">
      <el-form :model="form" label-width="120px" class="form-demo">
        <el-form-item label="图书名称">
          <el-input v-model="form.bookName" />
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="form.author" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="form.price" />
          <!-- <el-input-number v-model="form.price" controls-position="right" /> -->
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="form.publisher" />
        </el-form-item>
        <el-form-item label="出版时间">
          <el-date-picker v-model="form.date" type="date" style="width: 60%;" />
        </el-form-item>
        <!-- <el-form-item label="封面">
          <el-input type="file" />
        </el-form-item>
        <el-form-item>
          <p style="color: #1ab394;">请重新选择图书封面</p>
        </el-form-item> -->

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">关闭</el-button>
          <el-button color="#1c84c6" @click="saveEdit">更新</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { Search, Delete, Edit } from '@element-plus/icons-vue'
import imgURL from '@/assets/img/dn.png'

const multipleTableRef = ref()
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const tableData = [
  {
    id: 1,
    bookName: '当你学会独处',
    author: '周国平',
    price: '23.00',
    date: '2016-05-02',
    publisher: '人文出版社',
    url: imgURL,

  },
  {
    id: 2,
    bookName: '当你学会独处',
    author: '周国平',
    price: '23.00',
    date: '2016-05-02',
    publisher: '人文出版社',
    url: '@/assets/img/dn.png',
  },

]
/*********更新和删除操作*********** */
const editTitle = ref('修改图书')
const dialogTableVisible = ref(false)
const form = reactive({
  bookName: '',
  author: '',
  price: 0,
  date: '',
  publisher: '',
  // url:''
})
const open = (index, row) => {
  if (row) {
    console.log('1', row)
    editTitle.value = '修改图书'
    handleEdit(index, row)
  } else {
    console.log('2', row)
    editTitle.value = '添加图书'
    form.bookName = ''
    form.author = ''
    form.price = ''
    form.date = ''
    form.publisher = ''
  }
  dialogTableVisible.value = true
  console.log('111111111111111111')
}
let idx = -1;
const handleEdit = (index, row) => {
  idx = index
  form.bookName = row.bookName
  form.author = row.author
  form.price = row.price
  form.date = row.date
  form.publisher = row.publisher


}

/*******更新和添加的操作********/
const saveEdit = () => {
  //完成跟新操作 to ......
}



/*********删除单本图书************* */
const handleDelete = (index, row) => {
  //to 删除
  // 二次确认删除
  ElMessageBox.confirm('确定要删除吗？', '提示', {
    type: 'warning'
  })
    .then(() => {
      ElMessage.success('删除成功');
      //to 传递id 到后台 

      // 删除成功后
      // getData()
    })
    .catch(() => { });
}

/*******删除多个**** */
//删除多个数据  to......
const handleAllDelete = () => {
  // console.log('删除多个')
  console.log(multipleSelection.value, '===拿到所有选择的数据====')
  if (multipleSelection.value.length == 0) {
    ElMessage.error('请选择项')
    return
  }
  // console.log(state.multipleSelection.map(item=>item.id))
  //axios删除的操作
  // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})	
}

/*************查看日志***************/
/**flag日志组件的显示 */
const props = defineProps({
  flag: String
})
const { flag } = toRefs(props)
console.log(flag, '=======')
const emit = defineEmits(['update:flag'])
const catLog = () => {
  emit('update:flag', '2')
}

</script >
<style lang="less" scoped>
.handle-box {
  margin-bottom: 20px;
}


.handle-input {
  float: right;
  width: 240px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #F56C6C;
}

.blue {
  color: #1296e2;
  font-weight: bold;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.cell {
  display: inline-block;

  .el-button {
    margin-left: 0px;
  }
}

.right-btn {
  justify-content: center;

  .el-button {
    margin-right: 6px;
    padding: 1px 5px;
  }
}

.form-demo {
  .el-input {
    width: 60%;
  }

  .el-input-number {
    width: 60%;
  }

}

.handle-input .el-input-group__append button.el-button,
.el-input-group__append button.el-button:hover {
  background-color: #1C84C6;
  color: #fff;
  font-weight: 700;
}
</style>